<template>
  <div>
    <el-button type="info" @click="$router.push('/commodity')">返回类别管理</el-button>
    <el-card>
      <el-form ref="form" :model="form" class="form" :inline="true" size="mini">
        <el-form-item label="子类别名称:" class="name">
          <el-input
           v-model="form.name"
           style="width: 200px"
           @change="getOMOUser()"
           clearable
           ></el-input>
        </el-form-item>
        <div class="buttonL">
          <el-button type="primary" size="small" @click="inquire()">查询</el-button>
          <el-button size="small" @click="resetForm">重置</el-button>
        </div>
      </el-form>
    </el-card>
    <el-row :gutter="10">
      <el-col :span="8"
        ><div class="grid-content bg-purple">
          <span>子类别总数：{{timeList.length}}</span>
        </div></el-col
      >
      <el-col :span="8"
        ><div  class="grid-content bg-purple">
          <el-button type="primary" size="small" @click="showDialog = true">新增子类别</el-button>
        </div></el-col
      >
    </el-row>
    <el-card>
      <el-table border :data="timeList" row-key="id">
        <el-table-column label="排序" prop="id" align="center" />
        <el-table-column label="类别名称" prop="name" align="center" />
        <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="reWriteOMOUser(scope.row.id)">编辑</el-button>
          <el-button type="danger" size="small" @click="deletes(scope.row.id)">删除</el-button>
        </template>
        </el-table-column>
      </el-table>
         <el-pagination
      @size-change="handleSizeChange"
      @current-change="changePage"
      :page-size="page.size"
      :current-page="page.page"
      :page-sizes="[2, 5, 7, 10]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total - 1">
    </el-pagination>
    </el-card>
     <!-- 放置一个弹层 用来编辑新增节点 -->
    <el-dialog :title="`${showText}权限`" :visible.sync="showDialog" @close="btnCancel" width="50%">
      <!-- 表单 -->
      <el-form ref="perForm" :rules="rules" :model="fromas" label-width="80px">
        <el-form-item label="排序" prop="name">
          <el-input  v-model="fromas.id" style="width:60%" />
        </el-form-item>
        <el-form-item label="子类别名称" prop="code">
          <el-input v-model="fromas.name" style="width:60%" />
        </el-form-item>
      </el-form>
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" type="primary" @click="btnOK" >确定</el-button>
          <el-button size="small" @click="btnCancel" >取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
// getOMOUser, searchOMOUser, addOMOUser, delOMOUser, reWriteOMOUser
import { getOMOUser, searchOMOUser, getOMOTotal, reWriteOMOUser, addOMOUser, reWriteOMOTotal, delOMOUser } from '@/api/comm.js'
import { queryFn } from '@/utils'
export default {
  name: 'Commodity',
  data () {
    return {
      timeList: [], // 表格数据
      currentPage4: 4,
      showDialog: false, // 控制编辑新增弹层
      rules: {
        // 表单验证
        name: [{ required: true, message: '请输入序号', trigger: 'blur' },
          {
            min: 2,
            max: 2,
            message: '长度在 2 到 10 个字符',
            trigger: 'blur'
          }],
        code: [{ required: true, message: '请输入类别名称', trigger: 'blur' },
          {
            min: 2,
            max: 10,
            message: '长度在 2 到 10 个字符',
            trigger: 'blur'
          }]
      },
      // 翻页
      currentPage: 1,
      page: {
        page: 1,
        size: 10,
        total: 0
      },
      // 查询数据
      form: {
        name: '',
        time: '',
        type1: null,
        type2: null
      },
      fromas: {}
    }
  },
  computed: {
    showText () {
      return this.fromas.id ? '编辑' : '新增'
    }
  },
  methods: {
    // 查询
    async inquire () {
      const obj = queryFn(this.form)
      const { data } = await searchOMOUser(obj)
      console.log(data)
      this.timeList = data
    },
    // 重置表单
    resetForm () {
      this.form.name = ''
      this.getOMOUser()
    },
    // 翻页
    changePage (newPage) {
      console.log(`当前页: ${newPage}`)
      this.page.page = newPage
      const obj = {
        _page: this.page.page,
        _limit: this.page.size
      }
      this.getOMOUser(obj)
    },
    // 变换页面条数
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.page.size = val
      const obj = {
        _limit: this.page.size
      }
      this.getOMOUser(obj)
    },
    // 获取类别信息
    async getOMOUser (obj) {
      const { data } = await getOMOUser(obj)
      this.timeList = data
      console.log(data)
      console.log(this.timeList)
      const res = await getOMOTotal()
      this.page.total = res.data[0].total
    },
    // 获取id为？的信息并渲染到弹窗上
    async reWriteOMOUser (id) {
      try {
        this.showDialog = true
        const { data } = await searchOMOUser({ id: id })
        this.fromas = data[0]
        // console.log(this.formData)
      } catch (error) {
        console.log(error)
      }
    },
    // 确定
    async btnOK () {
      try {
        if (this.fromas.id) {
          await reWriteOMOUser(this.fromas)
          this.$message.success('修改成功!')
        }
        this.$refs.OMOform.validate(async (success) => {
          if (success) {
            await addOMOUser(this.fromas)
            const obj = {
              id: 1,
              total: this.page.total + 1
            }
            await reWriteOMOTotal(obj)
            this.$message.success('添加成功!')
          }
        })
      } catch (error) {
        console.log(error)
        this.$message.error('失败,请重试!')
      }
      this.getOMOUser()
      this.$refs.OMOform.resetFields()
      this.dialogVisible = false
    },
    // x
    btnCancel () {
      this.fromas = {
        name: '', // 类别名称
        code: '', // 排序
        type: '' // 类型
      }
      this.$refs.perForm.resetFields()
      this.showDialog = false
    },
    // 删除
    async deletes (id) {
      try {
        this.$confirm('是否删除该文件?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            await delOMOUser(id)
            this.$message.success('删除成功!')
            const obj = {
              id: 1,
              total: this.page.total - 1
            }
            await reWriteOMOTotal(obj)
            this.getOMOUser()
          })
          .catch(() => {})
      } catch (error) {
        this.$message.error('删除失败,请重试!')
      }
    }
  },
  created () {
    this.getOMOUser()
  }
}
</script>

<style lang="less" scoped>
.form {
  box-sizing: border-box;
}
.el-row {
  padding-left: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.buttonL {
  padding-left: 30px;
  display: inline-block;
}
.el-button + .el-button {
  margin-left: 30px;
}
</style>
